{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>管理员后台登录</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/signin.css' %}">
    <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.cookie.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/utils.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.form.js' %}"></script>
</head>
<body>
    <div class="container">
        <form class="form-signin" method="post" id="data-form">
            {% csrf_token %}
            <h2 class="form-signin-heading text-center">请登录</h2>
            <input type="text" id="inputUsername" class="form-control" placeholder="用户名" name="username" required autofocus>
            <input type="password" id="inputPassword" class="form-control" placeholder="密码" name="password" required>
            <button class="btn btn-lg btn-primary btn-block" id="submit-btn">登录</button>
        </form>
        {#  提示框   #}
        {% include 'utils/modal.html' %}
    </div>
</body>
    <script type="text/javascript">
         var csrftoken = $.cookie('csrftoken');
            function csrfSafeMethod(method) {
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }
            $.ajaxSetup({
                beforeSend: function(xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });
    </script>
    <script type="text/javascript">
        $('#submit-btn').click(function (e){
            e.preventDefault()
            if ('' !== $('#inputUsername').val() && '' !== $('#inputPassword').val()){
                $.ajax({
                    type:"POST",
                    dataType:'json',
                    data:$('#data-form').serializeArray(),
                    url:'{% url "user-login" %}',
                    success:function (data){
                        var state = data.state
                        if (state === 'success'){
                            window.location.href = "{% url 'homepage' %}"
                        }else{
                            showModal('danger',data.msg)
                        }
                    },
                    error:function (data){
                        console.log(data)
                    }

                })
            }
        })
    </script>
</html>